<template>
  <div class="frame-cls">
    <!-- <div></div> -->
    <iframe
      id="iframe"
      name="iframe"
      :src="url"
      style="width: 100%; height: 100%; background-color: transparent"
      scrolling="auto"
      frameborder="0"
      @load="initData"
      ref="iframe"
    ></iframe>
  </div>
</template>
<script>
export default {
  name: "music",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import load from "@/utils/load.js"; // 引入

const url = ref("");
// const boxList = ref([
//   {
//     name: "iphone Se",
//     box: "375*667",
//   },
//   {
//     name: "iphone XR",
//     box: "414*896",
//   },
//   {
//     name: "iphone 12 Pro",
//     box: "390*844",
//   },
//    {
//     name: "Pixel 5",
//     box: "393*851",
//   },
//    {
//     name: "iPaid",
//     box: "393*851",
//   },
// ]);

const iframe = ref(null);
onMounted(() => {
  load.show();
  url.value = "http://42.192.180.12:7777/music/#/home";
  document.getElementById("iframe").style.display = "block";
});
const initData = () => {
  load.hide();
};
</script>

<style lang="less" scoped>
.frame-cls {
  position: relative;
  z-index: 100;
  height: 600px;
  width:400px;
  display: flex;
  justify-content: center;
  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}
</style>